<template>
	<view class="pl24 pr24 pb24 pt24 ">
		<view class="bgfff pt24  bdra20  ">
			<u-cell-group :border="false">
				<u-cell :arrow="false" :borderTop="false" :label="'ID : '+userInfo.id" :title="userInfo.nickname">
					<u-avatar size="50" slot="right-icon" :src="userInfo.avatar"></u-avatar>
				</u-cell>
			</u-cell-group>
			<u-gap bgColor="#F8F8F8" height="16"></u-gap>
			<u-cell-group :border="false">
				<u-cell :arrow="false" :borderBottom="true" icon="grid" :title="$root.m0"
					v-model="userInfo.nickname"></u-cell>
				<u-cell :borderBottom="true" icon="phone" :title="$root.m1" :value="userInfo.phone||''">
					<u-button class="bind-mobile " :plain="true" size="small" slot="right-icon" type="info"
						v-if="userInfo.phone==null">{{$root.m2}}</u-button>
				</u-cell>
				<u-cell :borderBottom="true" icon="weixin-fill" :title="$root.m3"
					:value="userInfo.mpwechatauth==null?$root.m4:$root.m5"></u-cell>
				<u-cell :borderBottom="true" icon="lock" :title="$root.m6" value=""></u-cell>
			</u-cell-group>
		</view>
		<u-modal :cancelText="$root.m8" :confirmText="$root.m7" v-show="showMobile" v-showCancelButton="true"
			:title="modalTitle">
			<view class="slot-content ">
				<u--form>
					<u-form-item :borderBottom="true" :label="$root.m9+': '" labelWidth="70">
						<u--input border="none" :placeholder="$root.m10" v-model="mobile"></u--input>
					</u-form-item>
					<u-form-item :borderBottom="true" :label="$root.m11+': '" labelWidth="70">
						<u--input border="none" :placeholder="$root.m12" v-model="code"></u--input>
						<view slot="right">
							<u-button size type="warning" v-if="texttime==''">{{$root.m13}}</u-button>
							<u-button size type="warning" v-if="texttime!=''">{{texttime}}</u-button>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
		<u-modal :cancelText="$root.m15" :confirmText="$root.m14" v-show="showWechat" v-showCancelButton="true"
			:title="modalTitle">
			<view class="slot-content ">
				<u--form>
					<u-form-item :borderBottom="true" :label="modalTitle+' : '" labelWidth="70">
						<u--input border="none" :placeholder="$root.m16" v-model="modalContent"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
		<u-modal :cancelText="$root.m19" :confirmText="$root.m18" v-showCancelButton="true" :title="$root.m17"
			v-if="showcancel">
			<view class="cancel-account ">
				<text>{{$root.m20+'!'}}</text>
			</view>
		</u-modal>
		<u-picker :cancelText="$root.m22" :columns="languagearr" :confirmText="$root.m21" :defaultIndex="defaultIndex"
			keyName="label" v-show="showlanguage"></u-picker>
		<view class="log-out-bnt ">
			<u-button :plain="true" shape="circle" type="default">{{$root.m23}}</u-button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				loading: !0,
				showMobile: !1,
				showWechat: !1,
				code: "",
				mobile: "",
				time: 60,
				texttime: "",
				modalTitle: "hello",
				modalContent: "",
				type: 0,
				userInfo: {},
				showcancel: !1,
				isupdate: !0,
				push: !1,
				rand: "",
				showlanguage: !1,
				language: "",
				defaultIndex: [0],
				languagearr: [
					[{
						label: this.$t("locale.zh-hans"),
						name: "zh-Hans"
					}, {
						label: this.$t("locale.zh-hant"),
						name: "zh-Hant"
					}]
				]
			}
		},
		onLoad() {

		},
		onShow() {

		},

		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.slot-content {
		padding: 12upx
	}

	.slot-content button {
		font-size: 25upx;
		height: 50upx;
		width: 150upx
	}

	.slot-content .col-content {
		padding: 0 !important
	}

	.slot-content .item-content {
		margin-left: 20upx
	}

	.log-out-bnt {
		margin-top: 120upx;
		padding: 20upx
	}

	.log-out-bnt button {
		border: 2upx solid #2270fc;
		color: #2270fc
	}

	.bind-mobile {
		float: right;
		font-size: 26upx;
		height: 50upx;
		width: 160upx
	}

	.slot-content uni-button {
		width: 155upx !important
	}
</style>